<template>
    <div>
      <el-form
      :model="formData"
      inline
      class="myForm"
      ref="myForm"
    >
      <el-form-item prop="diseaseName">
        <el-input v-model="formData.diseaseName" placeholder="请输入疾病名称"></el-input>
      </el-form-item>
      <el-form-item prop="doctorName">
        <el-input v-model="formData.doctorName" placeholder="请输入医生名字"></el-input>
      </el-form-item>
            <el-form-item prop="medicineName">
        <el-input v-model="formData.medicineName" placeholder="请输入药品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search">查找</el-button>
      </el-form-item>
    </el-form>

<div class="docdiv" v-show="searchdoctor">
<el-descriptions :column="4" border v-for="(item, index) in doctorData"
                    :key="index" class="docdes">
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        医生姓名
      </template>
     {{item.doctorName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-male"></i>
        医生年龄
      </template>
     {{item.age}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        医生所在科室
      </template>
          {{ item.departmentId | departmentFilter(departmentOptions) }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        医生职位
      </template>
      {{item.jobTitle}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        医生住址
      </template>
      {{item.homeAddress}}
    </el-descriptions-item>
  </el-descriptions>
</div>

<div class="diseasediv" v-show="searchdisease">
<el-descriptions :column="4" border v-for="(item, index) in diseaseData"
                    :key="index" class="diseasedes" direction="vertical">
     <el-descriptions-item label="疾病名称">{{item.diseaseName}}</el-descriptions-item>
    <el-descriptions-item label="疾病介绍">{{item.diseaseDesc}}</el-descriptions-item>
  </el-descriptions>
</div>

<div class="medicinediv" v-show="searchmedicine">
<el-descriptions :column="2" border v-for="(item, index) in medicineData"
                    :key="index" class="medicinedes" direction="vertical">
     <el-descriptions-item label="药品名称">{{item.medicineName}}</el-descriptions-item>
    <el-descriptions-item label="药品介绍">{{item.medicineMethod}}</el-descriptions-item>
    <el-descriptions-item label="药品服用方法">{{item.medicineFunction}}</el-descriptions-item>
  </el-descriptions>
</div>



    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[5, 10, 15, 20, 25]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
      v-show="mypage">
      </el-pagination>
 
    </div>
    
</template>


<script>
import axios from "axios";
export default {
    comName: '查询',
    comSort: 4,
    name: 'search',
 data(){
       return{
          departmentOptions: [],
        formData: {
   doctorName:'',
   medicineName:'',
diseaseName:''
        },
        doctorData:[],
        diseaseData:[],
        medicineData:[],
        searchdoctor:false,
        searchdisease:false,
        searchmedicine:false,
        mypage:false,
       
        pageInfo: {
            page: 1,
            limit: 5,
            total: 0,
        },
       }
    },
  mounted() {
  this.getdepartmentList();
  },
  filters:{
      departmentFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.departmentId) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].departmentName;
      }
    },

  },
  methods: {
    search () {
      if(this.formData.doctorName!==''){
      axios({
        url: "/api/user/searchdoctor",
        method: "post",
        data: {
          doctorName:this.formData.doctorName,
          limit:this.pageInfo.limit,
          page:this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.doctorData = res.data.list;
        this.pageInfo.total=res.data.total
        this.searchdoctor=true
        this.searchdisease=false
        this.searchmedicine=false
        this.mypage=true
        // this.$refs.myForm.resetFields()

      });

      // console.log("fff"+ this.formData.doctorName);
    }else if(this.formData.medicineName!==''){

       axios({
        url: "/api/admin/searchMedicine",
        method: "get",
        params: {
          medicineName:this.formData.medicineName,
          limit:this.pageInfo.limit,
          page:this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.medicineData = res.data.list;
        this.pageInfo.total=res.data.total
               this.searchdoctor=false
        this.searchdisease=false
        this.searchmedicine=true
        this.mypage=true

      });

      // console.log("ttt"+this.formData.medicineName);
    }else if(this.formData.diseaseName!==''){
  axios({
        url: "/api/user/searchdisease",
        method: "post",
        data: {
          diseaseName:this.formData.diseaseName,
          limit:this.pageInfo.limit,
          page:this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.diseaseData = res.data.list;
        this.pageInfo.total=res.data.total
        this.searchdoctor=false
        this.searchdisease=true
        this.searchmedicine=false
        this.mypage=true
      });
        // console.log("aaa"+this.formData.diseaseName);
    }

    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.getdata()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value
        this.getdata()
    },

        getdepartmentList() {
      axios({
        url: "/api/admin/departmentlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.departmentOptions = res.data.list;
        // console.log("55", this.departmentOptions);
      });
    },
  } 
}
</script>

<style lang="scss" scoped>
.myForm{
  margin-top: 10px;
  text-align: right;
  padding: 0px,15px;
}
.docdiv{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .docdes{
  width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    /deep/ .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr{
            font-size: 15px;
            color: rgb(43, 42, 42);
          }
          tr:first-child {
            th {
               color: rgb(43, 42, 42);
                         background: rgb(195, 209, 255);
             
            }
          }
        }
      }
    }
}
}

.diseasediv{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .diseasedes{
  width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    /deep/ .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr{
            font-size: 15px;
            color: rgb(43, 42, 42);
          }
          tr:first-child {
            th {
               color: rgb(43, 42, 42);
                              background: rgb(195, 209, 255);
             
            }
          }
        }
      }
    }
}
}

.medicinediv{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .medicinedes{
  width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    /deep/ .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr{
            font-size: 15px;
            color: rgb(43, 42, 42);
          }
          tr:first-child {
            th {
               color: rgb(43, 42, 42);
                             background: rgb(195, 209, 255);
             
            }
          }
        }
      }
    }
}
}

.myStyle{
      margin-top: 30px;
      text-align: center;
}

</style>